<template>
	<div style="position: relative" class="tree-container">
		<canvas id="canvas" ref="treeCanvas" class="tree-canvas"></canvas>
		<div v-html="statFork"></div>
	</div>
</template>

<script>
import Vector from './dreamTree/treeVector.js';
import Tree from './dreamTree/dreamTree.js'; //树
import Leaf from './dreamTree/treeLeaf.js'; //树叶
import Branch from './dreamTree/treeBranch.js'; //树干
export default {
	name: '',
	data() {
		return {
			textShow: false,
			x: 0,
			y: 0,
			statFork: '',
		};
	},
	components: {},

	mounted() {
		this.init();
	},

	methods: {
		init() {
			var canvas_width = document.body.clientWidth;
			var canvas_height = document.body.clientHeight - 300;
			var center_x = canvas_width / 2;
			var stretch_factor = 600 / canvas_height;
			var y_speed = 3 / stretch_factor; //速度
			let canvas = this.$refs.treeCanvas;
			canvas.width = canvas_width;
			canvas.height = canvas_height;
			var ctx = canvas.getContext('2d');
			ctx.globalCompositeOperation = 'lighter';
			// 构建树对象
			var treeObj = new Tree();
			treeObj.init(ctx);
			for (var i = 0; i < 3; i++) {
				new Branch(
					new Vector(center_x, canvas_height),
					new Vector(Math.random(-1, 1), -y_speed),
					15 / stretch_factor,
					Branch.randomrgba(0, 255, 0.3),
					treeObj
				);
			}
			//挂载暂时没用
			treeObj.render(function () {
				// 	$statMsg.html(this.stat.fork);
				console.log(treeObj.stat.fork);
				this.statFork = this.stat.fork;
			});
		},
	},
};
</script>

<style scoped>
.tree-container {
	width: 1000px;
	height: 600px;
}
.tree-canvas {
	width: 100%;
	background-color: #000;
	cursor: pointer;
}
</style>